<template>
    <button @click="obj.count++">增加{{obj.count}}</button>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'

const x = ref(0)
const y = ref(0)

// 1.侦听ref直接把ref定义的x写在上面即可
watch(x, (newX) => {
    console.log(`x is ${newX}`)
})

// 2.侦听reactive,需要使用箭头函数() => obj.count
const obj = reactive({ count: 0 })

// 这里需要用一个返回该属性的 getter 函数：
// 提供一个 getter 函数
// obj.count变化时，调用方法
watch(
    () => obj.count,
    (count) => {
        console.log(`count is: ${count}`)
    }
)

// 使用效果和上面相等
watch(
    function getter() {
        return obj.count
    },
    (count) => {
        console.log(`count is: ${count}`)
    }
)

</script>